<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <link rel="stylesheet" href="css/主页面.css">
	<title>顶部栏</title>
</head>
<body>
	<!-- 顶部栏 -->
	<div class="top-bar">
		<h1>学生作业管理系统</h1>
		<nav>
			<ul>
				<li><a href="#">李华 </a></li>
				<li><a href="#">2020级(大三)</a></li>
				<li><a href="#">加入班级</a></li>
				<li><a href="#">编辑资料 </a></li>
			</ul>
		</nav>
	</div>

    <div class="dropdown1">
		<a href="#">下拉菜单1</a>
		<div class="dropdown-content">
			<a href="#">菜单项1</a>
			<a href="#">菜单项2</a>
			<a href="#">菜单项3</a>
		</div>
	</div>
	<div class="dropdown2">
		<a href="#">下拉菜单2</a>
		<div class="dropdown-content">
			<a href="#">菜单项1</a>
			<a href="#">菜单项2</a>
			<a href="#">菜单项3</a>
		</div>
	</div>

		<button type="button" onclick="dianwo()" class="tongzhi">通知</button>
		<div class="zhezhao" id='zhezhao'>
			<div class="tankuang">
				<div id="header">
					<span>我是弹窗</span><br>
					<span>我是弹窗</span><br>
					<span>我是弹窗</span><br>
					<span>我是弹窗</span><br>
					<span>我是弹窗</span><br>
					<span>我是弹窗</span><br>
					<span>我是弹窗</span><br>
					<span>我是弹窗</span><br>
					<div id="header-right" onclick="hidder()">x</div>
				</div>
			</div>

		<script type="text/javascript">
			document.getElementById('zhezhao').style.display="none";
			function dianwo(){
				document.getElementById('zhezhao').style.display="";
			}
			function hidder(){
				document.getElementById('zhezhao').style.display="none";
			}
		</script>
	</div>
</body>
</html>